<template>
  <!--新增商品-->
  <el-dialog
    :close-on-click-modal="false"
    :title="addEdit"
    :visible.sync="dialogVisible"
    :beforeClose = 'handleClose'
    width="450px">
    <div v-loading="divLoading">
      <el-form size="mini" :model="sendForm" label-width="120px"  ref="sendForm" :rules="rules">
        <el-form-item label="商品牌号：" prop="materialId">
          <el-select
               v-model="sendForm.materialId"
                filterable
                placeholder="请选择"
                clearable
                remote
                reserve-keyword
                :remote-method="querySearch1">
                <el-option
                  v-for="item in goodsList"
                  :key="item.materialId"
                  :label="item.categoryName+' '+ item.brandName +' '+item.moreSuGoodsSn"
                  :value="item.materialId">
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="供应商：" prop="fromCompany">
          <span>{{ sendForm.fromCompany }}</span>
          <!-- <el-select v-model="sendForm.fromCompany" filterable clearable @change="handleWarehouse" :disabled="addEdit=='编辑商品'">
              <el-option
                v-for = 'item in fromCompanyList'
                :label="item.fromCompanyName"
                :value="item.fromCompanyName"
                :key="item.fromCompanyId">
              </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="仓库：" prop="warehouseId">
          <span>{{ warehouseName }}</span>
          <!-- <el-select v-model="sendForm.warehouseId" filterable clearable  :disabled="addEdit=='编辑商品'" >
            <el-option v-for="item in warehouseLists" :label="item.warehouseName" :value="item.warehouseId" :key="item.warehouseId">
            </el-option>
          </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="发货地区：">
          <el-cascader
            v-model="diQuIds"
            :props="{ value: 'areaId',label:'areaName',children:'children' }"
            :options="options"></el-cascader>
        </el-form-item> -->
        <el-form-item label="发货方式：" prop="sendTypes">
          <el-radio-group v-model="sendForm.sendTypes">
              <el-radio label="自提">自提</el-radio>
              <el-radio label="送到">送到</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="结算方式：" prop="payTypes">
          <el-radio-group v-model="sendForm.payTypes">
              <el-radio label="现汇">现汇</el-radio>
              <el-radio label="承兑">承兑</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="包装：" prop="goodsWeight">
            <el-input style="width:100px" v-model="sendForm.goodsWeight" ></el-input><span style="font-size:14px;padding-left:5px;">/ 包</span>
        </el-form-item>
        <el-form-item label="起订数量：" prop="buyMinNum">
           <el-input v-model="sendForm.buyMinNum" style="width:100px;"></el-input> <span style="font-size:14px;padding-left:5px;">/ 吨</span>
        </el-form-item> -->
        <el-form-item label="采购底价：" prop="purchasePrice">
           <el-input v-model="sendForm.purchasePrice" style="width:100px;"></el-input>
        </el-form-item>
        <el-form-item label="可售库存量：" prop="goodsStock">
           <el-input  style="width:100px;" v-model="sendForm.goodsStock"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注：">
          <el-input v-model="sendForm.priceRemark" type="textarea" style="width:200px"></el-input>
        </el-form-item> -->
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确认</el-button>
      </span>
  </el-dialog>
</template>
<script>
import {
  addGoodsData,
  warehouseList,
  getAreaList,
  getFromCompanyList,
} from '@/api/allInLine/inquiry'
import {getMaterialList} from '@/api/allInLine/goods'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui';

const defaultSendForm = {
    priceId:'',
    goodsDetailId:0, //规格商品ID,0表示新增
    materialId : '', //商品物料ID
    fromCompany : '',//供应商
    warehouseId : '', //发货仓库
    sendTypes : '', //发货方式
    payTypes : '', //结算方式
    purchasePrice :'' , //采购底价
    goodsStock:'',
    //goodsWeight : '', //包装重量(吨)
    //buyMinNum : '', //起订量填)
    // sendAreaId : '',  //发货区域ID(修改时，非必填)
    // stockNum : '',  //库存
    // priceRemark : '',
};

export default {
  name: "index",
  data(){
    return {
      dialogVisible:false,
      btnLoading:false,
      divLoading:false,
      sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
      warehouseName:'',
      rules: {
        materialId: [{ required: true, message: '请选择商品牌号', trigger: 'change' }],
        sendTypes:[{required:true,message:'请选择发货方式',trigger:'change'}],
        payTypes:[{required:true,message:'请选择结算方式',trigger:'change'}],
        purchasePrice:[{required:true,message:'请填写采购底价',trigger:'blur'}],
        goodsStock:[{required:true,message:'请填写可售库存量',trigger:'blur'}],
        // fromCompany:[{required:true,message:'请选择供货商',trigger:'change'}],
        // warehouseId:[{required:true,message:'请选择仓库',trigger:'change'}],
        // goodsWeight:[{required:true,message:'请填写包装',trigger:'blur'}],
        // buyMinNum:[{required:true,message:'请填写起订数量',trigger:'blur'}],
      },
      addEdit:'',
      // warehouseLists:[],
      // options:[],
      // fromCompanyList:[],
      diQuIds:[],
      goodsList:[]

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {
    // this.fromCompanysList()
  },
  filters: {

  },
  methods:{
    //显示新增商品
    showGoodsPop(item){
      // this.addEdit='新增商品'
      // this.getAddressListData()
      this.dialogVisible = true;
      if (item) {
      console.log(item,'====>');
      // this.divLoading = true
      this.addEdit = '编辑商品'
      this.warehouseName = item.warehouseName
      for (let key in defaultSendForm) {
        this.sendForm[key]=item[key]?item[key]:defaultSendForm[key]
      }
      this.querySearch1(item.goodsSn)
      this.sendForm.priceId=[item.priceId]
      // // this.handleWarehouse(item.fromCompany)
      // // this.diQuIds = [item.provinceId,item.cityId,item.areaId]
      // this.sendForm.goodsDetailId = item.goodsDetailId
      // this.sendForm.materialId = item.materialId,
      // this.sendForm.fromCompany = item.fromCompany,
      // this.sendForm.warehouseId = item.warehouseId,
      // this.sendForm.sendAreaId = item.sendAreaId,
      // this.sendForm.sendTypes = item.sendTypes,
      // this.sendForm.payTypes = item.payTypes,
      // this.sendForm.goodsWeight = item.goodsWeight,
      // this.sendForm.buyMinNum = item.buyMinNum,
      // this.sendForm.purchasePrice = item.purchasePrice,
      // this.sendForm.stockNum = item.stockNum,
      // this.sendForm.priceRemark = item.priceRemark,
      // this.sendForm.goodsStock = item.goodsStock
     }
    },
    //关闭新增商品
    handleClose(){
      this.dialogVisible = false;
      this.$refs.sendForm.resetFields()
      this.sendForm= JSON.parse(JSON.stringify(defaultSendForm))
    },

     // 获取省市区列表
    //  getAddressListData(){
    //   getAreaList().then((res)=>{
    //     this.options = res;
    //   })
    // },

    //提交商品成功
    handleConfirm(){
      this.$refs.sendForm.validate(valid=>{
        if(valid){
          this.btnLoading = true
          const data = JSON.parse(JSON.stringify(this.sendForm))
          // data.sendAreaId = this.diQuIds?this.diQuIds[this.diQuIds.length-1]:''
          addGoodsData(data).then(res=>{
          Message.success('提交成功')
          this.btnLoading = false
          this.sendForm= JSON.parse(JSON.stringify(defaultSendForm))
          this.$emit('update')
          this.dialogVisible=false
      }).catch(err=>{
          this.btnLoading = false
      })
        }
      })

    },

    // handleWarehouse(val){
    //   this.sendForm.warehouseId=''
    //   warehouseList({fromCompany:val}).then(res=>{
    //     this.warehouseLists = res
    //   })
    // },
    // // 发货公司列表
    // fromCompanysList(){
    //   getFromCompanyList().then(res=>{
    //     this.fromCompanyList = res
    //   })
    // },
    // 物料id模糊搜索
    querySearch1(queryString){
      if(queryString && queryString!= ''){
        getMaterialList({categoryName:'',keywords:queryString,pageSize:1000,pageNum:1}).then(res=>{
         this.goodsList= res.list
         this.divLoading = false
      }).catch(()=>{
         this.divLoading = false
      })
      }
    },
  },
}
</script>

<style  lang="scss">

</style>
